<template>
  <el-form :model="topicNameChange">
    <el-form-item label="原课题名称：" label-width="200px" prop="oldTopicName">
      <el-input
        v-model="topicNameChange.oldTopicName"
        autocomplete="off"
        style="width: 480px"
        :readonly="true"
        hide-required-asterisk="false"
      ></el-input>
    </el-form-item>
    <el-form-item label="新课题标题：" label-width="200px" prop="newTopicName">
      <el-input
        placeholder="新课题标题"
        v-model="topicNameChange.newTopicName"
        autocomplete="off"
        style="width: 480px"
        :readonly="readonly"
        hide-required-asterisk="false"
      ></el-input>
    </el-form-item>
    <el-form-item label="变更理由：" label-width="200px" prop="changeReason">
      <el-input
        placeholder="变更理由"
        type="textarea"
        rows="5"
        v-model="topicNameChange.newTopicName"
        autocomplete="off"
        style="width: 480px"
        :readonly="readonly"
        hide-required-asterisk="false"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: ['messages'],

  data() {
    return {
      // 修改课题名称信息
      topicNameChange: {
        oldTopicName: '',
        newTopicName: '',
        changeReason: '',
      },
    };
  },

  mounted() {
    this.topicNameChange.oldTopicName = this.messages.topicName;
  },
};
</script>

<style></style>
